<template>
  <view class="sel-container">
    <label class="radio">
      <radio @click="allselectedChange" :checked="isChecked" color="#C00000" /><text>全选</text>
    </label>
    
    <view class="total">
      合计:<text>￥{{selectPrice}}</text>
    </view>
    
    <view class="pay">
      结算({{selectCount}})
    </view>
  </view>
</template>
<script>
  import { mapGetters, mapMutations} from 'vuex'
  export default{
    data() {
      return {
        
      }
    },
    methods: {
      ...mapMutations('cart', ['allSelectedChangeState']),
      allselectedChange() {
       console.log(this.isChecked)
        this.allSelectedChangeState(this.isChecked)
      }
    },
    computed:{
      ...mapGetters('cart', ['selectCount', 'total', 'selectPrice']),
      isChecked() {
        return this.selectCount === this.total ? true : false
      }
    }
  }
</script>
<style lang="scss">
  .sel-container{
    position: fixed;
    height: 50px;
    background-color: #fff;
    bottom: 0%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    .radio{
      display: flex;
      align-items: center;
    }
    .total{
      margin-left: 5px;
      text{
        color:#C00000;
        font-weight: bold;
      }
    }
    .pay{
      width: 100px;
      height: 100%;
      background-color: #C00000;
      display: flex;
      justify-content: center;
      align-items: center;
      color:#fff
    }
  }
</style>
